<!DOCTYPE html>
<html>
<head>

    {% include 'public/header.phtml' %}

    <title>Materia - Admin Template</title>

</head>
<body id="app" class="app off-canvas">


{% include 'public/top.phtml' %}


<!-- main-container -->
<div class="main-container clearfix">


    {% include 'public/left.phtml' %}
    <!-- content-here -->
    <div class="content-container" id="content">
        <div class="page page-forms-elements">

            <ol class="breadcrumb breadcrumb-small">
                <li>菜单</li>
                <li class="active"><a href="/nav/index">菜单管理</a></li>
            </ol>

            <div class="panel-body"><button type="button" class="btn btn-line-success btn-rounded waves-effect"><a
                        href="/nav/add" style="color: #000;">添加菜单</a></button></div>

            <div class="page-wrap">
                <!-- row -->
                <div class="row">

                    <!-- Data Table -->
                    <div class="col-md-12">
                        <div class="panel panel-lined table-responsive panel-hovered mb20 data-table" style="padding-bottom: 20px">
                            <div class="panel-heading">菜单列表</div>
                            <div class="panel-body">
                                <div class="small text-bold left mt5">
                                    展现&nbsp;
                                    <select class="lengthSelect">
                                        <option value="5">5</option>
                                        <option value="10" selected>10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                    &nbsp;条目
                                </div>

                                <form class="form-horizontal right col-lg-4" action="javascript:;">
                                    <input type="text" class="form-control input-sm searchInput" placeholder="Type keyword">
                                </form>
                            </div>
                            <!-- data table -->
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>
                                        ID
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        菜单名称
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        状态
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        主菜单
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        操作
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- data initialize via script, can also be load via ajax -->
                                 {% for nav_list in nav %}
                                 <tr role="row" class="odd">
                                     <td class="sorting_1">{{nav_list.id}}</td>
                                     <td>{{nav_list.label}}</td>
                                     {% if nav_list.status is 0 %}
                                     <td>显示</td>
                                     {% else %}
                                     <td>隐藏</td>
                                     {% endif %}

                                     <td><button type="button" class="btn btn-success waves-effect"><a href="/nav/edit/{{ nav_list.id }}" style="color: #fff;">编辑</a></button><button type="button" class="btn btn-danger waves-effect">
                                             <a href="javascript:void(0);" onclick="deleteNav({{nav_list.id}},this)" style="color: #fff;">删除</a></button></td></tr>
                                 {% endfor %}

                                </tbody>
                            </table>
                            <!-- #end data table -->

                        </div>
                    </div>


                </div>
                <!-- #end row -->


            </div> <!-- #end page-wrap -->
        </div> <!-- #end page -->
    </div> <!-- #end content-container -->

</div> <!-- #end main-container -->


<!-- theme settings -->
<div class="site-settings clearfix hidden-xs">
    <div class="settings clearfix">
        <div class="trigger ion ion-settings left"></div>
        <div class="wrapper left">
            <ul class="list-unstyled other-settings">
                <li class="clearfix mb10">
                    <div class="left small">Nav Horizontal</div>
                    <div class="md-switch right">
                        <label>
                            <input type="checkbox" id="navHorizontal">
                            <span>&nbsp;</span>
                        </label>
                    </div>


                </li>
                <li class="clearfix mb10">
                    <div class="left small">Fixed Header</div>
                    <div class="md-switch right">
                        <label>
                            <input type="checkbox"  id="fixedHeader">
                            <span>&nbsp;</span>
                        </label>
                    </div>
                </li>
                <li class="clearfix mb10">
                    <div class="left small">Nav Full</div>
                    <div class="md-switch right">
                        <label>
                            <input type="checkbox"  id="navFull">
                            <span>&nbsp;</span>
                        </label>
                    </div>
                </li>
            </ul>
            <hr/>
            <ul class="themes list-unstyled" id="themeColor">
                <li data-theme="theme-zero" class="active"></li>
                <li data-theme="theme-one"></li>
                <li data-theme="theme-two"></li>
                <li data-theme="theme-three"></li>
                <li data-theme="theme-four"></li>
                <li data-theme="theme-five"></li>
                <li data-theme="theme-six"></li>
                <li data-theme="theme-seven"></li>
            </ul>
        </div>
    </div>
</div>
<!-- #end theme settings -->




<!-- Dev only -->
{% include 'public/footer.phtml' %}

<script src="<?=JS_PATH?>select2.min.js"></script>
<script src="<?=JS_PATH?>bootstrap-colorpicker.min.js"></script>
<script src="<?=JS_PATH?>bootstrap-slider.min.js"></script>
<script src="<?=JS_PATH?>summernote.min.js"></script>
<script src="<?=JS_PATH?>bootstrap-datepicker.min.js"></script>
<script src="<?=JS_PATH?>form-elements.init.js"></script>


<script src="<?=JS_PATH?>vendors.js"></script>


<script src="<?=JS_PATH?>screenfull.js"></script>
<script src="<?=JS_PATH?>perfect-scrollbar.min.js"></script>
<script src="<?=JS_PATH?>waves.min.js"></script>
<script src="<?=JS_PATH?>jquery.dataTables.min.js"></script>
<script src="<?=JS_PATH?>app.js"></script>
<!--<script src="<?/*=JS_PATH*/?>tables.init.js"></script>-->

<!--<script type="text/javascript">
    jQuery(function () {
        "use strict";

        function toggleBasicTableFns() {
            var $btable = $(".basic-table"),
                btns = [".btable-bordered", ".btable-striped", ".btable-condensed", ".btable-hover"];
            btns.forEach(function (btn) {
                $btable.find(btn).on("click touchstart", function (e) {
                    var tableClass = $(this).data("table-class");
                    e.preventDefault(), $(this).toggleClass("active"), $btable.find("table").toggleClass(tableClass)
                })
            })
        }
        function initDataTable() {
            var $dataTable = $(".data-table"), $table = $dataTable.find("table"),
                datas = [
                    {
                engine: "Gecko",
                browser: "Firefox 3.0",
                platform: "Win 98+/OSX.2+",
                version: 1.7,
                grade: "<button type='button' class='btn btn-success waves-effect'>编辑</button><button type='button' class='btn btn-danger waves-effect'>删除</button>"
                }
                ]
            var table = $table.DataTable({
                data: datas,
                columns: [{
                    data: "engine"
                }, {
                    data: "browser"
                }, {
                    data: "platform"
                }, {
                    data: "version"
                }, {
                    data: "grade"
                }],
                searching: !0,
                dom: "rtip",
                pageLength: 10
            });
            $dataTable.find(".searchInput").on("keyup", function () {
                table.search(this.value).draw()
            }), $dataTable.find(".lengthSelect").on("change", function () {
                table.page.len(this.value).draw()
            }), $dataTable.find(".dataTables_info").css({
                "margin-left": "20px",
                "font-size": "12px"
            })
        }
        function _init() {
            toggleBasicTableFns(), initDataTable()
        }
        _init()
    });


</script>-->
<script>
    function deleteNav(nav_id, node) {
        if (confirm('你确定要删除这个菜单吗?')) {
            $.post('/nav/delete', {nav_id: nav_id}, function (response) {
                if (response.success) {
                    var parent = node.parentNode.parentNode;
                    if (parent) {
                        parent.parentNode.removeChild(parent);
                    }
                }
            });
        }
    }
</script>

</body>
</html>

